<template>
  <div>
    <slot name="myheader"></slot>
    <slot name="mynav"></slot>
    <h1>子组件</h1>
    <h1 @click="$listeners.sendmsg">{{myname}}</h1>
    <h1>{{$attrs.age}}</h1>
    <h1 v-for="item in $attrs.hobby" :key="item">{{item}}</h1>
    <!-- $atts完美的传递给 组件 -->
    <cart-two v-on="$listeners" v-bind="$attrs"></cart-two>
    <hr>
  </div>
</template>

<script>
import cartTwo from './cartTwo'
export default {
  name: '2209vueCartOne',
  props:["myname"],
  components:{
    cartTwo
  },
  data() {  
    return {
      
    };
  },
  created(){},
  mounted() {
      //1. this.$attrs 获取父组件给子组件传递的属性数据，除设置props的属性以外 (class 和 style 除外)
      // 用于 elmentui等ui组件的二次封装 用来继承原组件的所有属性
      console.log(this.$attrs)

      //2. this.$listeners
      // this.$listeners 可以接受父组件绑定所有事件名称 可以在子组件中绑定 $listeners.sendmsg 通常用于组件的二次封装
      console.log(this.$listeners)
    // 3. this.$slots 获取所有插槽内容
      // 获取的插槽内容是虚拟dom
      // 在使用render（渲染函数）书写一个组件时，访问 vm.$slots 最有帮助。
      console.log(this.$slots)
      
    
  },

  methods: {
    
  },
};
</script>